<template>
  <div>
    <div>这里是正常的页面内容000</div>
    <teleport to="body">
      <div>这里是插入的内容111</div>
    </teleport>
    <teleport to="body">
      <div id="tMain">这里是插入的内容222</div>
    </teleport>
    <teleport to="#tMain">
      <div>这里是插入的内容333</div>
    </teleport>
    <teleport to="#tMain">
      <div>这里是插入的内容444</div>
    </teleport>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  setup(props, context) {
    return {}
  }
}
</script>

<style lang="less"></style>

<style lang="less" scoped>
.default-box {
  width: 100%;
  height: 300px;
  background-color: beige;
}
.insert-box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>
